<template>
	<view class="infoPage" v-if="showList">
		<view class="banner">
<!-- 			<swiper indicator-dots="true" indicator-color="rgba(255,255,255,1)" indicator-active-color="#E41805" autoplay="true" interval="3000">
				<swiper-item v-for="(item, index) in bannerList" :key="item" class="banner-tags">
					<image lazy-load="true" :src="item" mode="aspectFill" @click="$imgPreview(item, index, '', bannerList)"></image>
				</swiper-item>
			</swiper> -->

			<u-swiper :list="formatBannerList" mode="number" indicator-pos="bottomRight" :height="558" :border-radius="0" @click="openPreview"></u-swiper>
			<view class="banner-tags">
				<view class="banner-tags__tag banner-tags__tag--fast" v-if="car.is_fast">急</view>
				<view class="banner-tags__tag banner-tags__tag--drop" v-if="car.is_drop">降</view>
				<view class="banner-tags__tag banner-tags__tag--new" v-if="car.is_fast && car.is_drop ? false: car.is_new">新</view>
			</view>
			<view class="banner-date">
				<view class="banner-date__inner" :class="{'banner-date__inner--toggle':!!cars.sort_time}">
					<view class="banner-date__text">发布时间：{{cars.create_time}}</view>
					<view class="banner-date__text">更新时间：{{cars.sort_time}}</view>
					<view class="banner-date__text">发布时间：{{cars.create_time}}</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main__section">
				<view class="car-info__box">
					<view class="carName flex ju-be">
						<view class="carName__txt u-line-3">{{ carMsg.car.name }}</view>

						<view class="like" @click="joinlike">
							<text :class="is_collection == 0 ? 'iconfontPT iconjiarushoucang' : 'iconfontPT iconshoucang-yixuanzhong1 '"></text>
						</view>
					</view>

					<view class="carprice">
						<view class="carprice__number">
							<view class="carprice__number-inner">
								<view class="now-price">
									{{carMsg.is_drop ? carMsg.update_price : carMsg.car.update_price || carMsg.car.price }} 万
								</view>
								<view class="drop-price" v-if="carMsg.car.is_drop">
									<view class="drop-price__icon iconfontPT iconxiajiang"></view>	
									{{(carMsg.car.price - carMsg.car.update_price).toFixed(2)}} 万
								 </view>
							</view>
							<view class="carprice__number-inner">
								<view v-if="carMsg.car.is_drop" class="original-price">原价 {{carMsg.car.price}} 万</view> <view class="tax-price">新车含税价 {{carMsg.car.new_price}}</view>
							</view> 
						</view>
						<view class="ContactSeller" @click="getPhone">联系卖家</view>
					</view>
				</view>
				<!-- 车辆信息 -->
				<view class="carMsg">
					<view class="title">
						<text class="title__txt">车辆信息</text>
						<!-- <text :class="hideFlag ? 'iconfontPT iconup' : 'iconfontPT icondown1'" @click="hideinfo"></text> -->
						<view class="moreCu" @click="getpz(carMsg.cars.vin)">
							<text class="moreCu__icon iconfontPT iconcaidan"></text>
							<text class="moreCu__txt">配置</text>
						</view>
					</view>
					<view class="msgInfo" v-if="hideFlag">
						<view class="itembox ">
							<view class="item flex ">
								<view class="itembox__name">初登日期</view>
								<view class="itembox__txt">{{ carMsg.cars.card_time }}</view>
							</view>
							<view class="item flex ">
								<view class="itembox__name">里程</view>
								<view class="itembox__txt">{{ carMsg.cars.mileage }}万公里</view>
							</view>
							<view class="item  flex ">
								<view class="itembox__name">可售地</view>
								<view class="itembox__txt">{{ carMsg.cars.city }}</view>
							</view>
							<view class="item  flex ">
								<view class="itembox__name">保险</view>
								<view class="itembox__txt">{{ carMsg.cars.expires_time }}到期</view>
							</view>
							<view class="item  flex ">
								<view class="itembox__name">来源</view>
								<view class="itembox__txt">{{ carMsg.cars.yum }}</view>
							</view>
							<view class="item  flex ">
								<view class="itembox__name">险种</view>
								<view class="itembox__txt">{{ carMsg.cars.Insurance||'无' }}</view>
							</view>
							<view class="item  flex ">
								<view class="itembox__name">级别</view>
								<view class="itembox__txt">{{ carMsg.cars.level}}</view>
							</view>
							<view class="item  flex ">
								<view class="itembox__name">标准</view>
								<view class="itembox__txt">{{ carMsg.cars.envir}}</view>
							</view>
							<view class="item  flex " v-if="carMsg.cars.intake">
								<view class="itembox__name">发动机</view>
								<view class="itembox__txt">{{ carMsg.cars.intake}}</view>
							</view>
							<view class="item  flex " v-if="carMsg.cars.intake">
								<view class="itembox__name">排量</view>
								<view class="itembox__txt">{{ carMsg.cars.intake ==='涡轮增压'?carMsg.cars.displacement.replace('L','T'):carMsg.cars.displacement}}</view>
							</view>
							<view class="item  flex " v-if="carMsg.cars.trans_type">
								<view class="itembox__name">变速箱</view>
								<view class="itembox__txt">{{ carMsg.cars.trans_type}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 卖家信息 -->
				<view class="sellerMsg" v-if="!hideInfo">
					<view class="title"><text class="title__txt">卖家信息</text></view>
					<view class="sellerInfo clear">
						<image :src="carMsg.seller.portrait ? carMsg.seller.portrait : '../../static/images/head.png'" mode="aspectFill"></image>
						<view class="sellerInfo__basic">
							<view class="name">
								<text>{{ carMsg.seller.name }}</text>
								<text>{{ carMsg.seller.phone }}</text>
							</view>
						</view>
					</view>
					<view class="address" v-if="carMsg.cars.yum != '个人'">
						<view @click="getLocation(carMsg.seller)">
							<text class="iconfontPT icondingwei"></text>
							{{ address }}
						</view>
						<text class="distance ">{{ juli }}</text>
					</view>
				</view>
		
				<view class="carMsg">
					<view class="title"><text class="title__txt">车况描述</text></view>
					<text class="carMsg__description">{{ carMsg.cars.content || '车况描述' }}</text>
					<view class="carmsg-images">
						<image v-for="(item,index) in carmsgImages" :src="item.image" mode="aspectFill" :key="index" @click="openPreview(index)"></image>
						<view class="carmsg-images__more" v-if="imageListMore" @click="imageListMore = false" >加载更多</view>
					</view>
				</view>
				
				<!-- 推荐 -->
				<view class="recommend"  v-if="!hideInfo&&recommendList.length">
					<view class="title"><text class="title__txt">推荐</text></view>
					<view class="itemBox">
						<navigator class="item clear" v-for="(item, index) in recommendList" :key="index" :url="'/pages/used-car/infoPage?car_id=' + item.id">
							<!-- navigator  :url="'/pages/used-car/infoPage?car_id='+item.id" class="clear"> -->
							<image :src="item.image" mode="aspectFill"></image>
							<view class="recommendCar">
								<view class="name u-line-2">{{ item.carname }}</view>
								<view class="car-msg__card">
									<text class="car-msg--label car-msg--label--style2">{{ item.card_time }}年</text>
									<text class="car-msg--label">{{ item.mileage }}</text>
								</view>
								<view class="car-msg__bottom">
									<view class="price">
										<text>{{ item.price.toFixed(2) }}万</text>
									</view>
									<!-- <text class="ContactSellerSmall">去看看</text> -->
								</view>
							</view>
							<!-- </navigator> -->
						</navigator>
					</view>
				</view>
				
				<!-- 立即沟通 -->
				<view class="communicate">
					<view class="contart" @click="getPhone">立即沟通</view>
					<navigator v-if="isShare" class="home-link" open-type="switchTab" url="/pages/index/index">去首页</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { carInfo, wPay, getsellphone, collect } from '../../apis/used-car/api.js';
export default {
	data() {
		return {
			bannerList: [
				{
					image: '/static/assets/car.png'
				}
			],
			hideFlag: true,
			showList: false,
			carMsg: {},
			recommendList: [],
			car_id: '',
			vin: '',
			img: '',
			uid: '',
			is_collection: 0, // 1 收藏
			lat: '',
			lng: '',
			address: '',
			juli: '',
			isShare:false,
			isSelfShare:false,
			factory_id:'',
			car:null,
			cars:{},
			imageListMore:true,
			sharePhone:'',
			distrib_id:null,
			hideInfo:false,
		};
	},
	computed: {
		// showInfo(){
		// 	return 
		// },
		carmsgImages(){
			const list = JSON.parse(JSON.stringify(this.formatBannerList)) 
			return this.imageListMore ? list.splice(0,3):this.formatBannerList
		},
		formatBannerList() {
			const bannerList = this.bannerList.map(item => {
				let newObj = {};
				newObj.image = item;
				return newObj;
			});
			return bannerList;
		},
		// 商户分享他人渠道车
		isMerchantsShareOtherChannelCar(){
			console.log(this.cars.yum ==='渠道' && uni.getStorageSync('isMerchant') && !this.isSelfShare)
			return this.cars.yum ==='渠道' && uni.getStorageSync('isMerchant') && !this.isSelfShare
		}
	},
	onLoad(query) {
		this.sharePhone = query.sharePhone 
		this.isShare = query.isShare === 'true';
		this.isSelfShare = query.isSelfShare === 'true'
		this.hideInfo = query.hideInfo === 'true'
		if(!uni.getStorageSync('factory_id') && query.factoryid){
			uni.setStorageSync('factory_id', query.factoryid);
		}
		uni.showToast({
			title: '加载中',
			icon: 'loading',
			duration: 10000000,
			mask: true
		});
		let that = this;
		that.car_id = query.car_id;
		that.getCarInfo()
	},
	methods: {
		openPreview(index) {
			this.$imgPreview(this.bannerList[index], index, '', this.bannerList);
		},
		getLocation(res){
			        const latitude = res.lat;
			        const longitude = res.lng;
			        uni.openLocation({
			            latitude: latitude,
			            longitude: longitude,
						name:res.address,
			            success: function () {
			                console.log('success');
			            }
			        });
		},
		getCarInfo() {
			let that = this;
			if(that.isShare){
				const params ={car_id: that.car_id}
				if(this.isSelfShare) params.isShare = true
				carInfo(params).then(res=>{
					that.car = res.data.car
					that.cars = res.data.cars
					that.bannerList = res.data.banner;
					that.img = res.data.banner[0];
					that.carMsg = res.data;
					that.is_collection = res.data.car.is_collection;
					that.recommendList = res.data.recommend;
					that.address = res.data.seller.address;
					that.juli = res.data.seller.juli / 1000 + 'km';
					uni.hideToast();
					that.showList = true;

				}).catch(err=>{
					uni.hideToast();
				})
			}else{
				that.uid = uni.getStorageSync('userId')
				uni.getStorage({
					key: 'location',
					success(e) {
						that.lat = e.data.latitude;
						that.lng = e.data.longitude;
						carInfo({
							car_id: that.car_id,
							uid: that.uid,
							lat: that.lat,
							lng: that.lng
						}).then(res => {
							if (res.code == 1) {
								that.car = res.data.car
								that.cars = res.data.cars
								that.bannerList = res.data.banner;
								that.img = res.data.banner[0];
								that.carMsg = res.data;
								that.is_collection = res.data.car.is_collection;
								that.recommendList = res.data.recommend;
								that.address = res.data.seller.address;
								that.juli = res.data.seller.juli / 1000 + 'km';
								that.factory_id = res.data.seller.factory_id
								that.isSelfShare = uni.getStorageSync('distributor_id') === res.data.seller.distrib_id
							}
							uni.hideToast();
							that.showList = true;
						});
					}
				});
			}

		},
		getcanshu() {},
		getpz() {
			let _that = this;
			uni.navigateTo({
				url: '/pages/used-car/peizhi?vin=' + _that.carMsg.cars.vin
			});
		},
		joinlike() {
			/*获取用户信息*/
			let userInfo = {};
			let _that = this;
			let is_delete = _that.is_collection == 0 ? 0 : 1;
			uni.getStorage({
				key: 'userInfo',
				success(e) {
					userInfo = e.userinfo;
					collect({
						uid: _that.uid,
						collection_id: _that.car_id,
						is_delete: is_delete,
						type: 2
					}).then(res => {
						if (res.code == 1) {
							_that.getCarInfo();
						}
					});
				}
			});
		},
		phonemake(number) {
			uni.makePhoneCall({
				phoneNumber: number,
				success: function() {},
				fail: function() {
					console.log('拨打电话失败！');
				}
			});
		},
		// hideinfo() {
		// 	this.hideFlag = !this.hideFlag;
		// },
		async getPhone() {
			if(!this.isShare && !uni.getStorageSync('openId')){
				uni.navigateTo({url:'/pages/authorize'})
				return false
			}
			const res = await getsellphone({
				uid: uni.getStorageSync('uid'),
				car_id: this.car_id
			})
			const phone = this.$u.test.mobile(this.sharePhone)?this.sharePhone:res.data.phone
			if (this.$u.test.mobile(phone)) {
				this.phonemake(phone);
			} else {
				let _that = this;
				let params = {},
					userinfo = {};
				let openid = '';
				uni.getStorage({
					key: 'openId',
					success(e) {
						params.openid = e.data;
					}
				});
				uni.getStorage({
					key: 'userId',
					success(e) {
						params.uid = e.data || '';
					}
				});

				uni.getStorage({
					key: 'factory_id',
					success(e) {
						params.factory_id = e.data == 0 ? 1 : e.data;
					}
				});
				uni.getStorage({
					key: 'userInfo',
					success(e) {
						userinfo = e.data;
						params.car_id = _that.car_id;
						params.type = 3;
						params.class = 'phone';
						params.image = _that.img;
						uni.showToast({
							title: '加载中',
							icon: 'loading',
							duration: 10000000,
							mask: true
						});
						wPay(params).then(res => {
							let result = res.data.jsapi_param; //接口返回数据
							uni.showToast({
								title: '加载中',
								icon: 'loading',
								duration: 10000000,
								mask: true
							});
							if (res.code == 1) {
								uni.hideToast();
								uni.requestPayment({
									appId: result.appId,
									nonceStr: result.nonceStr,
									package: result.package,
									paySign: result.paySign,
									signType: result.signType,
									timeStamp: result.timeStamp,
									success(rs) {
										getsellphone({
											uid: params.uid,
											car_id: params.car_id,
											order_no: res.data.order_no
										}).then(reponse => {
											_that.carMsg.seller.phone = reponse.data.phone;
											_that.phonemake(reponse.data.phone);
										});
									},
									fail(res) {}
								});
							}
						});
					}
				});
			}
		}
	},
	onShareAppMessage(res){
		const sharePhone = this.isMerchantsShareOtherChannelCar ? uni.getStorageSync('phone'):''
	
		return {
			title:this.carMsg.car.name,
			path:`/pages/used-car/infoPage?car_id=${this.car_id}&factoryid=${this.factory_id}&isShare=true&isSelfShare=${this.isSelfShare}&sharePhone=${sharePhone}&hideInfo=${this.isMerchantsShareOtherChannelCar }`
		}
	},
	onShareTimeline(){
		const sharePhone = this.isMerchantsShareOtherChannelCar ? uni.getStorageSync('phone'):''
		return {
			title:this.carMsg.car.name,
			query:`car_id=${this.car_id}&factoryid=${this.factory_id}&isShare=true&isSelfShare=${this.isSelfShare}&sharePhone=${sharePhone}&hideInfo=${this.isMerchantsShareOtherChannelCar }`
		}
	}
};
</script>

<style lang="less">
.carmsg-images{
	&__more{
		font-size: 26rpx;
		color: #666666;
		text-align: center;
		line-height: 50rpx;
	}
}
page {
	background-color: #f8f8f8;
}

.infoPage {
	padding-bottom: 206rpx;

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;

		display: flex;
		justify-content: space-between;
		align-items: center;

		.title__txt {
			color: #333;
			font-weight: 500;
			font-size: 34rpx;
		}

		.moreCu {
			display: flex;
			justify-content: space-between;
			align-items: center;

			&__icon {
				font-size: 32rpx;
				position: relative;
				top: 1rpx;
			}

			&__txt {
				font-size: 28rpx;
				color: #666;
				margin-left: 6rpx;
			}
		}
	}
	.banner {
		width: 100%;
		height: 558rpx;

		swiper,
		uni-swiper {
			height: 100%;
		}

		image {
			width: 100%;
			height: 100%;
		}

		.u-swiper-wrap .u-swiper-indicator {
			left: 0;
			right: 0;
			width: unset;
		}
	}

	.moreCu {
		font-size: 28rpx;
	}

	.iconshoucang-yixuanzhong1 {
		color: #e41805;
	}

	.main {
		padding: 0 30rpx;

		&__section {
			padding-top: 30rpx;
		}

		.car-info__box {
			padding: 24rpx;
			background-color: #fff;
			border-radius: 10rpx;
		}

		.carName {
			font-size: 38rpx;
			font-weight: bold;
			align-items: flex-start;

			&__txt {
				color: #333;
				font-size: 36rpx;
				font-weight: 500;
			}

			.canshu,
			.like {
				text {
					font-size: 36rpx;
				}
			}

			.like {
				margin-left: 60rpx;
			}
		}

		.carprice {
			position: relative;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			&__number {
				display: flex;
				// align-items: flex-end;
				flex-direction: column;
				&-inner{
					display: flex;
					align-items: flex-end;
				}
				.now-price{
					font-size: 50rpx;
					color: #E31805;
					font-weight: bold;
				}
				.drop-price{
					font-size: 30rpx;
					font-weight: bold;
					color: #00C985;
					display: flex;
					align-items: center;
					padding: 6rpx;
					&__icon{
						font-size: 24rpx;
						color: #00C985;
						line-height: 1em;
						margin-right: 5rpx;
						padding-top: 2rpx;
					}
				}
				.original-price,.tax-price{
					font-size: 22rpx;
					color: #7B7878;
				}
				.original-price{
					padding-right: 20rpx;
					position: relative;
					&::after{
						content: "丨";
						margin-left: 20rpx;
					}
				}
				.tax-price{
					// padding-left: 20rpx;
				}

			}

			.ContactSeller {
				background-color: #e31805;
				border-radius: 10rpx;
				color: #fff;
				text-align: center;
				font-size: 26rpx;
				padding: 10rpx 22rpx;
			}
		}

		.carMsg {
			margin-top: 30rpx;
			font-size: 43rpx;
			color: #000;

			padding: 24rpx;
			background-color: #fff;
			border-radius: 10rpx;
			
			&__description {
				font-size: 28rpx;
				font-weight: 400;
				color: #333;
				margin-top: 20rpx;
				text-indent: 2em;
				line-height: 1.8;
			}

			.msgInfo {
				margin-top: 30rpx;
				width: 100%;
				font-size: 28rpx;

				&::after {
					content: '';
					display: block;
					height: 0;
					overflow: hidden;
					clear: both;
				}

				.itembox {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					.item {
						width: 50%;
						margin-bottom: 24rpx;
						.itembox__name{
							width: 4em;
							min-width: 4em;
							overflow: hidden;
							text-align:justify;
							text-justify:inter-ideograph;
							height: 1em;
							height: 1.4em;
							align-items: flex-start;
							&:after {
								content: "";
								display: inline-block;
								width: 100%;
								height: 0px;
							}
						}
						.itembox__txt {
							font-size: 26rpx;
							font-weight: 400;
							color: #666666;
							margin-left: 10rpx;
						}
					}

					&::after {
						content: '';
						display: block;
						height: 0;
						overflow: hidden;
						clear: both;
					}
				}

				.carInfo {
					width: 100%;

					text {
						&:nth-child(1) {
							color: #ef6500;
						}
					}
				}
			}
		}

		.sellerMsg {
			margin-top: 30rpx;

			padding: 24rpx;
			background-color: #fff;
			border-radius: 10rpx;

			&::after {
				content: '';
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}

			.sellerInfo {
				margin-top: 28rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
					float: left;
				}

				&__basic {
					width: calc(~'100% - 120rpx');
					float: left;
					margin-left: 20rpx;

					.name {
						font-size: 26rpx;

						text {
							&:nth-child(2) {
								color: #a5a5a5;
								display: block;
								margin-top: 20rpx;
							}
						}
					}
				}
			}

			.address {
				font-size: 26rpx;
				margin-top: 28rpx;
				position: relative;
				display: flex;
				justify-content: space-between;
				.icondingwei {
					font-size: 26rpx;
					color: #3a87dd;
					margin-right: 10rpx;
				}

				.distance {
					color: #a5a5a5;
				}
			}
		}

		.recommend {
			margin: 30rpx 0;
			padding: 24rpx;
			background-color: #fff;
			border-radius: 10rpx;

			.itemBox {
				// padding-bottom: 206rpx;
				margin-top: 20rpx;

				.item {
					padding: 20rpx;
					margin-bottom: 20rpx;
					// box-shadow: 0rpx 4rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
					background-color: #fff;

					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #eee;

					&:last-child {
						border-bottom: 0;
						margin-bottom: 0;
					}

					image {
						width: 194rpx;
						height: 146rpx;
						border-radius: 10rpx;
					}

					.recommendCar {
						width: calc(~'100% - 216rpx');
						padding-left: 20rpx;
						position: relative;
						height: 100%;

						.name {
							font-size: 28rpx;
							min-height: 70rpx;
						}

						.price {
							font-size: 24rpx;

							text {
								display: block;
								font-size: 36rpx;
								color: #e74438;
							}
						}

						.car-msg__card {
							margin: 14rpx 0;

							.car-msg--label {
								border-radius: 8rpx;
								background-color: rgba(68, 169, 255, 0.6);
								margin: 0 10rpx 0 0;
								padding: 4rpx 10rpx;
								color: #fff;
								font-size: 20rpx;

								&.car-msg--label--style2 {
									background-color: rgba(255, 129, 55, 0.6);
								}
							}
						}

						.car-msg__bottom {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 10rpx;
						}

						.ContactSellerSmall {
							background-color: #e31805;
							border-radius: 10rpx;
							color: #fff;
							text-align: center;
							font-size: 26rpx;
							padding: 10rpx 22rpx;
						}
					}
				}
			}
		}

		.communicate {
			padding: 20rpx 0;
			position: fixed;
			background-color: #fff;
			width: 100%;
			height: 160rpx;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.contart {
				width: 660rpx;
				height: 90rpx;
				background-color: #e31705;
				border-radius: 10rpx;
				text-align: center;
				line-height: 90rpx;
				color: #fff;
				margin-bottom: 20rpx;
			}
		}
	}
	.flex {
		display: flex;
		align-items: center;
	}
	.ju-be {
		justify-content: space-between;
	}
	.bold {
		font-weight: bold;
	}
	.zkms {
		width: 100%;
		word-wrap: break-word;
		font-size: 30rpx;
		color: #666;
	}
	.ckms {
		align-items: flex-start;
		.bold {
			line-height: 36rpx;
		}
	}
}

.home-link{
	color: #999999;
	text-align: center;
}

.banner-tags{
		position: absolute;
		top: 20rpx;
		right: 0;
		display: flex;
		z-index: 9;
		&__tag{
			width: 50rpx;
			height: 64rpx;
			color: #FFFFFF;
			border-radius: 7rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			margin-right: 20rpx;
			&--fast{
				background: linear-gradient(#F88133,#F63E2B);
			}
			&--drop{
				background: linear-gradient(#F76547,#F53C38);
			}
			&--new{
				background: linear-gradient(#7CF595,#52D341);
			}
		}
}
.banner-date{
	position: absolute;
	z-index: 9;
	top: 500rpx;
	left: 12rpx;
	height: 50rpx;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 100rpx;
	padding: 0 20rpx;
	&__inner{
		&--toggle{
			animation: 6s linear 2s infinite toggle;
		}
	}
	&__text{
		line-height: 50rpx;
		height: 50rpx;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
	}
}


@keyframes toggle{
	0%{
		transform: translateY(0%);
	}
	25%,50%{
		transform: translateY(-50rpx);
	}
	75%,100% {
		transform: translateY(-100rpx);
	}
}

</style>
